<!--
 * @Author: LiYubin
 * @Date: 2024-08-27 11:06:23
 * @LastEditors: LiYubin
 * @LastEditTime: 2024-08-28 08:44:02
 * @Description:
 * @FilePath: \asset-management-company-pc-front\src\views\Home\Index.vue
-->
<template>
  <div class="home-container">
    <img
      v-if="appStore.getIsDark"
      src="@/assets/imgs/logo-light.svg"
      alt=""
      class="h-50px w-235px"
    />
    <img v-else src="@/assets/imgs/logo-dark.svg" alt="" class="h-50px w-235px" />
    <div class="home-container-title">
      <div class="home-container-title-text"> {{ t('workplace.welcome') }}， {{ username }} </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { pieOptions, barOptions } from './echarts-data'
defineOptions({ name: 'Home' })

const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
const { wsCache } = useCache()
const isDark = ref(null)
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})
watch(
  () => wsCache,
  () => console.log(1111, wsCache.get(CACHE_KEY.IS_DARK)),
  // isDark.value = wsCache.get(CACHE_KEY.IS_DARK)
  // console.log(isDark.value)
  { immediate: true }
)

const getAllApi = async () => {
  await Promise.all([])
  loading.value = false
}

getAllApi()
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 150px);
  justify-content: center;
  align-items: center;
}

.home-container-title {
  display: flex;
  width: 550px;
  height: 130px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}
</style>
